/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Grid, Input, Select, DatePicker, Button } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { noteTypes } from '../../../../conf/noteTypeConfig';

const { Row, Col } = Grid;

export default class RequestNoteListFilter extends Component {
  static displayName = 'RequestNoteListFilter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        sStatus: '待审批',
        sType: 'all',
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  render() {
    return (
      <IceFormBinderWrapper
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="20" style={styles.formRow}>
          <Col l="5">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>搜索：</span>
              <IceFormBinder triggerType="onBlur" name="sStr">
                <Input
                  onPressEnter={this.props.handleSearch(this.state.value)}
                  placeholder="请输入"
                  size="medium"
                  style={{ width: '180px' }}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="sStr" />
              </div>
            </div>
          </Col>
          <Col l="5">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>类型：</span>
              <IceFormBinder triggerType="onBlur" name="sType">
                <Select size="medium"  style={{ width: '180px' }}>
                  {
                    noteTypes.map((ele, idx) => {
                      return <Select.Option key={idx} value={ele.enName}>{ele.name}</Select.Option>;
                    })
                  }
                  <Select.Option key={100} value={'all'}>全部</Select.Option>
                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="sType" />
              </div>
            </div>
          </Col>
          <Col l="5">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>状态：</span>
              <IceFormBinder triggerType="onBlur" name="sStatus">
                <Select size="medium"  style={{ width: '180px' }}>
                  <Select.Option value="待审批">待审批</Select.Option>
                  <Select.Option value="我已同意">我已同意</Select.Option>
                  <Select.Option value="我已拒绝">我已拒绝</Select.Option>
                  <Select.Option value="all">全部</Select.Option>
                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="sStatus" />
              </div>
            </div>
          </Col>
          <Col l="5">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>日期：</span>
              <IceFormBinder triggerType="onBlur" name="sTime">
                <DatePicker size="medium"  style={{ width: '180px' }}/>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="sTime" />
              </div>
            </div>
          </Col>
          <Col l="3">
            <div style={styles.formItem}>
              <Button type='primary' onClick={this.props.handleSearch(this.state.value)}>查询</Button>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
    margin: 0,
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formLabel: {
    minWidth: '50px',
    fontSize: '14px',
  },
};
